<template>
  <div class="summarize">
    <div style="display: flex; align-items: center; padding-left: 10px;">
      <!-- <el-checkbox
        label="全选"
        size="small"
        @click="this.$emit('choose')"
      ></el-checkbox> -->
      <span
        class="del-selected"
        @click="this.$emit('delIds')"
      >删除选中的商品</span>
    </div>
    <div>
      <span
        style="margin: auto 5px; font-size: 10px; font-weight: 300;"
        v-show="quantity !== 0"
      >已选择<span style="margin:auto 5px; font-size: 16px; font-weight: 400; color: #3271ae;">{{ quantity }}</span>件商品</span>
      <span style="margin: auto 5px; font-size: 10px; font-weight: 400;">总价:</span>
      <span style="margin-right: 10px; color: #606266;">￥{{ totalPrice }}</span>
      <el-button
        style="height: 100%; background-color: #3271ae; color: #fff;"
        @click="toSettlement"
      >去结算</el-button>
    </div>
  </div>
</template>

<script>
import { useShoppingCartInfo } from "@/store/shoppingCart";
import { ElMessage } from 'element-plus';
const shoppingCartInfo = useShoppingCartInfo();

export default {
  props: {
    quantity: Number,
    totalPrice: Number,
    shoppingCartIds: String,
  },
  methods: {
    toSettlement() {
      if (this.shoppingCartIds.length === 0) {
        ElMessage.error("请选择")
        return;
      }
      shoppingCartInfo.shoppingCartIds = this.shoppingCartIds;
      this.$router.push({
        path: "/settlement",
      });
    },
  },
};
</script>

<style scoped>
.summarize {
  width: 1000px;
  height: 40px;
  margin: 20px auto;
  border: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
}

.del-selected {
  margin: auto 5px;
  font-size: 10px;
  font-weight: 300;
  cursor: pointer;
}

.del-selected:hover {
  color: #3271ae;
}
</style>